<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>校卡管理</title>
	<link rel="stylesheet" href="../css/main.css">

	<style>
		.center {
			margin: 10px auto;
			width: 320px;
			text-align: center;
		}

		.row {
			margin-top: 5px;
			overflow: hidden;
		}

		input:not([type="checkbox"]),
		select {
			border: solid 1px grey;
			border-radius: 1px;
			padding: 5px;
			width: 200px;
			box-sizing: border-box;
			font-size: 15px;
		}

		.row>div {
			height: 45px;
			box-sizing: border-box;
			float: left;

			line-height: 45px;
		}

		.left {
			width: 80px;
			text-align: right;
		}

		.right {
			width: 240px;
			text-align: left;

		}

		.submit {
			width: 150px;
			padding: 10px;
			background-color: deepskyblue;
			margin-top: 20px;
			border: none;
			color: white;
			border-radius: 10px;
			font-size: 16px;
		}

		.old-card {
			height: 80px;
			width: 100%;
			padding: 5px;
			margin: 5px;
			text-align: left;
			border-radius: 5px;
			position: relative;
			background-color: white;
			border: 1px solid silver;
		}

		.card-title,
		.card-identity,
		.card-number {
			display: inline-block;
			margin: 10px;
		}

		.report-loss {
			width: 50px;
			padding: 2px;
			border: none;
			border-radius: 5px;
			font-size: 14px;
			color: white;
			right: 10px;
			top: 10px;
			position: absolute;
			background-color: deepskyblue;
		}

		.new-card {
			height: 130px;
		}

		.new-card>button {
			width: 60px;
			padding: 3px;
			border: none;
			border-radius: 5px;
			font-size: 14px;
			color: white;
			margin: 7px calc((100% - 60px)/2);
			background-color: deepskyblue;
		}
	</style>

</head>

<body>

	<div class="header">
		<div class="header_title">校卡管理</div>
		<a onclick="history.back()">
			<img src="../image/return.png" alt="" class="return">
		</a>
	</div>
	<div style="height: 40px;"></div>

	<div class="center" id="vue-root">
		<div class="old-card" v-for="card in cards" :key="card.id">
			<div>
				<div class="card-title">关系:</div>
				<div class="card-identity" v-text="['本人','','父亲','母亲','其他家长'][card.status]"></div>
			</div>
			<div>
				<div class="card-title">卡号:</div>
				<div class="card-number" v-text="card.no"></div>
			</div>
			<!-- <button class="report-loss" @click="lost(card.status)">挂失</button> -->
		</div>

		<div class="old-card new-card" v-if="add">
			<div>
				<div class="card-title">关系:</div>
				<select v-model="status0">
					<option v-for="status in statuses" :value="status" :key="status"
						v-text="['本人','','父亲','母亲','其他家长'][status]"></option>
				</select>
			</div>
			<div>
				<div class="card-title">卡号:</div>
				<input placeholder="请输入卡号" class="card-number" style="margin: 0 !important;" v-model="no">
			</div>
			<button @click="submit">确定</button>
		</div>
		<div>
			<button class="submit" v-if="!add&&statuses.length>0" @click="add=true">添加卡</button>
		</div>

	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/js/common.js"></script>

	<script>
		new Vue({
			el: '#vue-root',
			data: {
				name: getStudent().name,
				cards: [],
				add: false,
				statuses: [],
				status0: null,
				no: null
			},
			created: function () {
				axios.get('/s/card').then(function (res) {
					this.cards = res.data;
					var o = {};
					this.cards.forEach(function (it) {
						o[it.status] = '';
					});
					for (var i = 0; i <= 4; i++)
						if (i != 1 && !(i in o)) this.statuses.push(i);
				}.bind(this));
			},
			methods: {
				lost: function (status) {
					if (!confirm('挂失后卡将无法正常使用。确认挂失？')) return;
					axios.post('/s/card/lost/' + status).then(function (res) {
						alert('挂失成功');
						history.back();
					});
				},
				submit: function () {
					if (this.status0 === null) {
						alert('请选择关系');
						return;
					}
					if (!this.no) {
						alert('请输入卡号');
						return;
					}
					axios.post('/s/card/' + this.status0, toFormParams({ no: this.no })).then(function (res) {
						alert('添加成功');
						location.reload();
					});
				}
			}
		});
	</script>

</body>

</html>